<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>07、事件指令-v-on-按键修饰符.html</title>
    <style>
        [v-cloak]{display: none}
    </style>
</head>
<body>
<!--第三步：指定vue从那个dom元素进行渲染和管理  ------------  view角色-->
<div id="app" v-cloak>
    <div>
        <p>用户：<input type="text"></p>
        <p>密码：<input type="text" placeholder="有监听enter提交" v-on:keyup.enter="toLogin"></p>
        <p>密码：<input type="text" placeholder="有监听enter提交" v-on:keyup.13="toLogin"></p>
        <p>密码：<input type="text" placeholder="有监听a提交" v-on:keyup.65="toLogin"></p>
        <p>密码：<input type="text" placeholder="这个普通的输入框"></p>
        <p><button @click="toLogin">登录</button></p>
    </div>
</div>
<!--第一步：引入vue.global.js文件-->
<script src="js/vue.min.js"></script>
<!--第二步：初始化一个vue实例-->
<script>
    //怎么去理解mvvm
    const vm = new Vue({//--------------vm角色
        el: "#app",
        // 数据模型
        data: {//------------------------model的角色
            message: "Hello Vue3.x"
        },
        // 事件必须定义在methods中，
        methods:{
            toLogin () {
                alert("去登录!!!")
            }
        }
    })
</script>
</body>
</html>